<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<title>agilebins - Demo演示页 - 简洁易用高效的jQuery插件</title>
<meta name="keywords" content="agilebins, jQuery插件" />
<meta name="description" content="agilebins.js是一个简洁易用高效的jQuery插件。在网站上常用到的，幻灯片、焦点图、公告跑马灯、图片滚动，内容切换等，只需要一个agilebins.js即可轻松解决！使用无门槛，无需懂得js代码编写也一样轻松使用。" />
<meta name="author" content="cloud,jolly" />
<meta name="generator" content="agilebins" />
<link rel="shortcut icon" href="images/agilebins.ico" />
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.agilebins-v1.0.3.min.js"></script>
</head>

<body>
<!-- 头部开始 -->
<div class="demo-header">
	<div class="w1000">
	<div class="logo z">
		<h2 class="logo-tit z"><a href="javascript:void(0)" title="agilebins.js v1.0.3">AgileBins</a></h2>
    <p class="subtit z">简洁易用高效</p>
	</div>
  </div>
</div>
<div class="clear"></div>
<!-- 头部结束 -->
<div class="demo-main">

<div class="demo-tit"><h2>导航演示</h2></div>

<!-- 导航例子开始 -->
<div class="demo-nav">
  <ul class="one">
    <li class="conts"><h3><a href="javascript:void(0)">首页</a></h3></li>
    <li class="conts">
      <h3><a href="javascript:void(0)">说明</a></h3>
      <div class="sub">
        <ul>
          <li><a href="javascript:void(0)">下拉内容1</a></li>
          <li><a href="javascript:void(0)">下拉内容2</a></li>
          <li><a href="javascript:void(0)">下拉内容3</a></li>
          <li><a href="javascript:void(0)">下拉内容4</a></li>
          <li><a href="javascript:void(0)">下拉内容5</a></li>
        </ul>
      </div>
    </li>
    <li class="conts">
      <h3><a href="javascript:void(0)">调试</a></h3>
      <div class="sub">
        <ul>
          <li><a href="javascript:void(0)">下拉内容1</a></li>
          <li><a href="javascript:void(0)">下拉内容2</a></li>
          <li><a href="javascript:void(0)">下拉内容3</a></li>
          <li><a href="javascript:void(0)">下拉内容4</a></li>
          <li><a href="javascript:void(0)">下拉内容5</a></li>
          <li><a href="javascript:void(0)">下拉内容6</a></li>
        </ul>
      </div>
    </li>
    <li class="conts">
      <h3><a href="javascript:void(0)">扩展</a></h3>
      <div class="sub">
        <ul>
          <li><a href="javascript:void(0)">下拉内容1</a></li>
          <li><a href="javascript:void(0)">下拉内容2</a></li>
          <li><a href="javascript:void(0)">下拉内容3</a></li>
          <li><a href="javascript:void(0)">下拉内容4</a></li>
        </ul>
      </div>
    </li>
    <li class="conts">
      <h3><a href="javascript:void(0)">参数</a></h3>
      <div class="sub">
        <ul>
          <li><a href="javascript:void(0)">下拉内容1</a></li>
          <li><a href="javascript:void(0)">下拉内容2</a></li>
          <li><a href="javascript:void(0)">下拉内容3</a></li>
          <li><a href="javascript:void(0)">下拉内容4</a></li>
          <li><a href="javascript:void(0)">下拉内容5</a></li>
          <li><a href="javascript:void(0)">下拉内容6</a></li>
          <li><a href="javascript:void(0)">下拉内容7</a></li>
          <li><a href="javascript:void(0)">下拉内容8</a></li>
        </ul>
      </div>
    </li>
    <li class="conts">
      <h3><a href="javascript:void(0)">下载</a></h3>
      <div class="sub">
        <ul>
          <li><a href="javascript:void(0)">下拉内容1</a></li>
          <li><a href="javascript:void(0)">下拉内容2</a></li>
          <li><a href="javascript:void(0)">下拉内容3</a></li>
          <li><a href="javascript:void(0)">下拉内容4</a></li>
          <li><a href="javascript:void(0)">下拉内容5</a></li>
          <li><a href="javascript:void(0)">下拉内容6</a></li>
        </ul>
      </div>
    </li>
    <li class="conts">
      <h3><a href="javascript:void(0)">工具</a></h3>
      <div class="sub">
        <ul>
          <li><a href="javascript:void(0)">下拉内容1</a></li>
          <li><a href="javascript:void(0)">下拉内容2</a></li>
          <li><a href="javascript:void(0)">下拉内容3</a></li>
          <li><a href="javascript:void(0)">下拉内容4</a></li>
          <li><a href="javascript:void(0)">下拉内容5</a></li>
          <li><a href="javascript:void(0)">下拉内容6</a></li>
          <li><a href="javascript:void(0)">下拉内容7</a></li>
          <li><a href="javascript:void(0)">下拉内容8</a></li>
        </ul>
      </div>
    </li>
    <li class="conts">
      <h3><a href="javascript:void(0)">交流</a></h3>
      <div class="sub">
        <ul>
          <li><a href="javascript:void(0)">下拉内容1</a></li>
          <li><a href="javascript:void(0)">下拉内容2</a></li>
          <li><a href="javascript:void(0)">下拉内容3</a></li>
          <li><a href="javascript:void(0)">下拉内容4</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<script type="text/javascript">
$(".demo-nav").agilebins({
 type: "menu",
 mainState: ".conts", /* 菜单导航元素 */
 mainEl: ".sub", /* 菜单盒子元素 */
 speed: 250, /* 默认=350, 效果速度 */
 effect: "slideDown",
 mainCur: true, /* 使用当前 dd 形式,表示不自动查找匹配下级作为效果运行 */
 autoPosition:true /* 默认=false, 自动识别定位方向, 运用更灵活 */
});
</script>

<div class="demo-js-area">
	<div class="codecont">
    <p><span class="html_line">1.</span>&nbsp;&nbsp;<span class="script_tag">&lt;script type=</span>"text/javascript"<span class="script_tag">&gt;</span></p>
    <p><span class="html_line">2.</span>&nbsp;&nbsp;<span class="html_tit">$</span>(".demo-nav")<span class="html_tit">.agilebins</span>({
    </p><p><span class="html_line">3.</span>&nbsp;&nbsp;&nbsp;&nbsp;<strong></strong><span class="html_tit">type:</span> "menu",
    </p><p><span class="html_line">4.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">mainState:</span> ".conts", <span class="html_size">/* 菜单导航元素 */</span>
    </p><p><span class="html_line">5.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">mainEl:</span> ".sub", <span class="html_size">/* 菜单盒子元素 */</span>
    </p><p><span class="html_line">6.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">speed:</span> 250, <span class="html_size">/* 默认=350, 效果速度 */</span>
    </p><p><span class="html_line">7.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">effect:</span> "slideDown", 
    </p><p><span class="html_line">8.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">mainCur:</span> <span class="script_tag2">true</span>, <span class="html_size">/* 使用当前 dd 形式,表示不自动查找匹配下级作为效果运行 */</span>
    </p><p><span class="html_line">9.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">autoPosition:</span><span class="script_tag2">true</span> <span class="html_size">/* 默认=false, 自动识别定位方向, 运用更灵活 */</span>
    </p><p><span class="html_line">10.</span>&nbsp;&nbsp;});</p>
    <p><span class="html_line">11.</span>&nbsp;&nbsp;<span class="script_tag">&lt;/script&gt;</span></p>
  </div>
</div>

<!-- 导航例子结束 -->



<div class="demo-tit"><h2>并列多图左右滚动演示</h2></div>


<!-- 图文左右滚动例子开始 -->

<div class="domo-pic-scroll-lr">
  <ul class="conts">
    <li><a href="javascript:void(0)">1</a></li>
    <li><a href="javascript:void(0)">2</a></li>
    <li><a href="javascript:void(0)">3</a></li>
    <li><a href="javascript:void(0)">4</a></li>
    <li><a href="javascript:void(0)">5</a></li>
    <li><a href="javascript:void(0)">6</a></li>
    <li><a href="javascript:void(0)">7</a></li>
    <li><a href="javascript:void(0)">8</a></li>
    <li><a href="javascript:void(0)">9</a></li>
  </ul>
  <div class="tabs"><ul></ul></div>
 	<a class="prev"></a>
  <a class="next"></a>
</div>


<script type="text/javascript">
	$(".domo-pic-scroll-lr").agilebins({	 
		autoPage: true,
		autoPlay: true,
		pnLoop: true,
		loop: true,
		hoverIsBtn:false,
		direction:"left",
		delayTime:3000, 
		sSpeed: 500,
		visNum: 5,
		pageState: ".tabs ul",
		scrollEl: ".conts",
		onClass:"current",
		sPrev: ".prev",
		sNext: ".next"
	});
</script>

<div class="demo-js-area">
	<div class="codecont">
    <p><span class="html_line">1.</span>&nbsp;&nbsp;<span class="script_tag">&lt;script type=</span>"text/javascript"<span class="script_tag">&gt;</span></p>
    <p><span class="html_line">2.</span>&nbsp;&nbsp;<span class="html_tit">$</span>(".domo-pic-scroll-lr")<span class="html_tit">.agilebins</span>({&nbsp;</p>
    <p><span class="html_line">3.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">autoPage:</span> <span class="script_tag2">true</span>,</p>
    <p><span class="html_line">4.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">autoPlay:</span> <span class="script_tag2">true</span>,</p>
    <p><span class="html_line">5.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">pnLoop:</span> <span class="script_tag2">true</span>,</p>
    <p><span class="html_line">6.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">loop:</span> <span class="script_tag2">true</span>,</p>
    <p><span class="html_line">7.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">hoverIsBtn:</span><span class="script_tag2">false</span>,</p>
    <p><span class="html_line">8.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">direction:</span>"left",</p>
    <p><span class="html_line">9.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">delayTime:</span>3000, </p>
    <p><span class="html_line">10.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">sSpeed:</span> 500,</p>
    <p><span class="html_line">11.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">visNum:</span> 5,</p>
    <p><span class="html_line">12.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">pageState:</span> ".tabs ul",</p>
    <p><span class="html_line">13.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">scrollEl:</span> ".conts",</p>
    <p><span class="html_line">14.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">onClass:</span>"current",</p>
    <p><span class="html_line">15.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">sPrev:</span> ".prev",</p>
    <p><span class="html_line">16.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">sNext:</span> ".next"</p>
    <p><span class="html_line">17.</span>&nbsp;&nbsp;});</p>
    <p><span class="html_line">18.</span>&nbsp;&nbsp;<span class="script_tag">&lt;/script&gt;</span></p>
  </div>
</div>

<!-- 图文左右滚动例子结束 -->



<div class="demo-tit"><h2>图文幻灯片演示</h2></div>

<!-- 图文幻灯片演示例子开始 -->

<div class="domo-slides">
  <div class="conts">
    <ul>
      <li><a href="javascript:void(0)">1</a></li>
      <li><a href="javascript:void(0)">2</a></li>
      <li><a href="javascript:void(0)">3</a></li>
      <li><a href="javascript:void(0)">4</a></li>
      <li><a href="javascript:void(0)">5</a></li>
      <li><a href="javascript:void(0)">6</a></li>
      <li><a href="javascript:void(0)">7</a></li>
      <li><a href="javascript:void(0)">8</a></li>
      <li><a href="javascript:void(0)">9</a></li>
    </ul>
  </div>
  <div class="tabs"><ul></ul></div>
  <a class="prev"></a>
  <a class="next"></a>
</div>
<!-- Html代码结束 -->

 

<!-- 调用代码开始 -->

<script type="text/javascript">
 $(".domo-slides").agilebins({
  autoPlay:true,
  mainEl:".conts ul",
  mainState:".tabs ul",
	autoMainState: true,
  onClass:"current",
   sPrev:".prev",
   sNext:".next",
  effect:"left"
  });
</script>

<div class="demo-js-area">
	<div class="codecont">
    <p><span class="html_line">1.</span>&nbsp;&nbsp;<span class="script_tag">&lt;script type=</span>"text/javascript"<span class="script_tag">&gt;</span></p>
    <p><span class="html_line">2.</span>&nbsp;&nbsp;<span class="html_tit">$</span>(".domo-slides")<span class="html_tit">.agilebins</span>({
    </p><p><span class="html_line">3.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">autoPlay:</span><span class="script_tag2">true</span>,
    </p><p><span class="html_line">4.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">mainEl:</span>".conts ul",
    </p><p><span class="html_line">5.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">mainState:</span>".tabs ul",
    </p><p><span class="html_line">6.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">autoMainState:</span> <span class="script_tag2">true</span>,
    </p><p><span class="html_line">7.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">onClass:</span>"current",
    </p><p><span class="html_line">8.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">sPrev:</span>".prev",
    </p><p><span class="html_line">9.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">sNext:</span>".next",
    </p><p><span class="html_line">10.</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="html_tit">effect:</span>"left"
    </p><p><span class="html_line">11.</span>&nbsp;&nbsp;});</p>
    <p><span class="html_line">12.</span>&nbsp;&nbsp;<span class="script_tag">&lt;/script&gt;</span></p>
  </div>
</div>

<!-- 图文幻灯片演示例子结束 -->





<div class="demo-tit"><a href="http://ab.geshai.com/help-debug.html" target="_blank">基础调试</a><a href="http://ab.geshai.com/example/focus-pics.html" target="_blank">扩展例子</a></div>



</div>
</body>
</html>
